<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>Dashboard</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <style>
      .dashboard {
        /* display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px; */
        /*padding: 20px 0;*/
      }

      .card {
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        padding: 20px;
      }

      .stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        margin-bottom: 20px;
      }

      .chart {
        height: 300px;
        width: 100%;
      }
      .dashboard-ecarts {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        margin: 10px 0;
      }
      .card-o {
        width: 70%;
      }
      .card-p {
        width: 30%;
        margin: 0 20px;
      }
      .card1 {
        display: flex;
        align-items: center;
      }
      .box {
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        padding: 15px;
        padding-bottom: 40px;
      }
      .box-a {
        display: flex;
        align-items: center;
        margin: 10px 0;
      }
      .box-b {
        height: 13px;
        border-left: 4px solid #3fc8e4;
      }
      .box-c {
        color: #878787;
        margin: 0 10px;
        font-size: 12px;
      }
      .nav-b {
        height: 13px;
        border-left: 4px solid #ffcc00;
      }
      .num-font {
        font-weight: 800;
        font-size: 20px;
        margin: 10px 0;
      }
    </style>
  </head>

  <body>
     <div style="padding: 20px">
      <div class="stats">
        <div class="box">
          <div class="num-font">{:__('Purchase_Statistics')}</div>
          <div class="card1">
            <div id="Achat-pie" style="width: 45%; height: 150px"></div>
            <div style="height: 150px">
              <div class="box-a">
                <div class="box-b"></div>
                <p class="box-c">{:__('Total_Purchases')}</p>
              </div>
              <div class="num-font" id="purchase-num"></div>
              <div class="box-a">
                <div class="nav-b"></div>
                <p class="box-c">{:__('Purchase_Amount_This_Month')}</p>
              </div>
              <div class="num-font" id="purchase-mon"></div>
            </div>
          </div>
        </div>
        <!-- 2 -->
        <div class="box">
          <div class="num-font">{:__('Sales_Statistics')}</div>
          <div class="card1">
            <div id="Vente-pie" style="width: 45%; height: 150px"></div>
            <div style="height: 150px">
              <div class="box-a">
                <div class="box-b"></div>
                <p class="box-c">{:__('Total_Sales_This_Month')}</p>
              </div>
              <div class="num-font" id="sales-num">54,071</div>
              <div class="box-a">
                <div class="nav-b"></div>
                <p class="box-c">{:__('Sales_Amount_This_Month')}</p>
              </div>
              <div class="num-font" id="sales-mon">54,071</div>
            </div>
          </div>
        </div>
        <!-- 3 -->
        <div class="box">
          <div class="num-font">{:__('Inventory_Statistics')}</div>
          <div class="card1">
            <div id="Stock-pie" style="width: 45%; height: 150px"></div>
            <div style="height: 150px">
              <div class="box-a">
                <div class="box-b"></div>
                <p class="box-c">{:__('Total_Inventory')}</p>
              </div>
              <div class="num-font" id="stock-num">54,071</div>
              <div class="box-a">
                <div class="nav-b"></div>
                <p class="box-c">{:__('Inventory_Cost')}</p>
              </div>
              <div class="num-font" id="purchase-money">54,071</div>
            </div>
          </div>
        </div>
        <!-- 4 -->
        <div class="box">
          <div class="num-font">{:__('Debt_Statistics')}</div>
          <div class="card1">
            <div id="arr-pie" style="width: 45%; height: 150px"></div>
            <div style="height: 150px">
              <div class="box-a">
                <div class="box-b"></div>
                <p class="box-c">{:__('Customer_Debt')}</p>
              </div>
              <div class="num-font" id="customers-mon">54,071</div>
              <div class="box-a">
                <div class="nav-b"></div>
                <p class="box-c">{:__('Supplier_Debt')}</p>
              </div>
              <div class="num-font" id="suppliers-mon">54,071</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="dashboard">
      <div class="dashboard-ecarts">
        <div class="card card-o">
          <h3>{:__('Purchases')}</h3>
          <div id="achats-chart" class="chart"></div>
        </div>
        <div class="card card-p">
          <h3>{:__('Inventory')}</h3>
          <div id="entrepots-chart" class="chart"></div>
        </div>
      </div>
      <div class="dashboard-ecarts">
        <div class="card card-o">
          <h3>{:__('Sales')}</h3>
          <div id="helooked-chart" class="chart"></div>
        </div>
        <div class="card card-p">
          <h3>{:__('Funds')}</h3>
          <div id="fonds-chart" class="chart"></div>
        </div>
      </div>
    </div>
  </body>
</html>
